<template>
  <div>
    <!--商品分类全局组件:不需要引入、注册直接使用-->
    <TypeCategory></TypeCategory>
    <list-container></list-container>
    <Recommend></Recommend>
    <Rank></Rank>
    <Like></Like>
    <!--floor组件:作为Home首页子组件  mock数据:数组里面有两个元素  floor需要v-for遍历出来！！！-->
    <!--通过遍历服务器数据:渲染出多个Floor组件进行展示   切记:组件在使用的时候标签(自定义)指令什么的都可以使用-->
    <!--父子组件通信:props-->
    <!--
       子组件的接受Props数据为啥没有变化？

       ---floorList这个数据来自于vuex->FloorList数据情况  两种:空数组   服务器返回数组
       ---空数组:空数组的时候，子组件都没有,什么干不了！！！
       ---当服务器数据回来之后，才开始渲染子组件，给子组件传递Floor对象props数据，因为子组件的props数据没有发生变化！！
    
    -->
    <Floor
      v-for="(floor, index) in floorList"
      :key="floor.id"
      :floor="floor"
    ></Floor>
    <Brand></Brand>
  </div>
</template>

<script>
//引入子组件
import ListContainer from "./listContainer";
import Recommend from "./recommend";
import Rank from "./rank";
import Like from "./like";
import Floor from "./floor";
import Brand from "./brand";
//辅助函数
//思考的问题:当Home组件mounted执行的时候,能否获取到Floor组件VC
import { mapState } from "vuex";
export default {
  name: "Home",
  components: {
    ListContainer,
    Recommend,
    Rank,
    Like,
    Floor,
    Brand,
  },
  //父组件home挂载完毕执行钩子
  mounted() {
    /* 
       当mounted执行的时候:第一次渲染可以获取到除了Floor标签以外的都可以 
       当mounted执行的时候:this.$store.dispatch("home/getFloor")才通知vuex发请求
       向服务器发请求消耗时间、渲染组件消耗时间！！！当服务器的数据回来以后在进行第二次渲染【10S以后】
    */
    this.$store.dispatch("home/getFloor");
  },
  computed: {
    ...mapState({
      floorList: (state) => state.home.floorList,
    }),
  },
};
</script>

<style scoped>
</style>
